<template>
    <div class="swiper-container" id='swiper1'>
        <div class="swiper-wrapper">
           <div class="swiper-slide" v-for="(item,index) in imgSrc" :key='index'><img :src="item" /></div>  
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
        
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    
</template>

<script>
import 'swiper/css/swiper.min.css'//类似link加在css文件
import swiperJs from 'swiper'//类似<script src="">加在js文件
export default {
    data:function(){
        return{
            //动态绑定资源文件加require('')
            imgSrc:['http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/95842/38/12546/80187/5e4ba3e7E09e0da3b/92aac67aefdf6b6f.jpg!cr_1125x445_0_171!q70.jpg.dpg',
            'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/101609/19/12235/145060/5e46424eEf6a83678/3c50be3674639a14.jpg!cr_1125x445_0_171!q70.jpg.dpg',
            'http://imgcps.jd.com/ling4/100008348530/5omL5py66LSt5a6e5oOg/5aSH6LSn6LaF5YC8/p-5c136f5e82acdd181ddfed33/ac11cf72/cr_1125x445_0_171/s1125x690/q70.jpg',
            '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/85293/11/12706/125753/5e4e546fE392a3702/f8c11e0c023ad574.jpg!cr_1125x445_0_171!q70.jpg.dpg',
            require('../assets/images/1.jpg'),require('../assets/images/2.jpg')]
        }
    },
    mounted(){
        var mySwiper = new swiperJs ('#swiper1', {
            autoplayDisableOnInteraction:false,
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            autoplay: {//自动切换
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },

            // 如果需要分页器
            pagination: {
            // el: '.swiper-pagination',
            el: '.swiper-pagination',
            dynamicBullets: true,
            },
            
            // 如果需要前进后退按钮
            // navigation: {
            // nextEl: '.swiper-button-next',
            // prevEl: '.swiper-button-prev',
            // },
            
            // 如果需要滚动条
            // scrollbar: {
            // el: '.swiper-scrollbar',
            // },
        })
    }
}
</script>

<style lang="less" scoped>
    .swiper-container{
        width: 100%;
        height: 140px;
    }
    .swiper-wrapper img{
        // width: 350px;
        width: 94%;
        height: 140px;
        border-radius: 5px;
    }
</style>